<template>
    <div class="sub-info">
        <div class="sub-info-title">
            <span>自我介绍</span>
        </div>
        <ability-content
            @updateResume="updateResumeAction"
            :id="id"
            v-if="abilityForms.length > 0"
            :abilityForms="abilityForms"
            @deleteItem="deleteItem"
            :index="i"
            :key="`${i}5`"
            v-for="(v,i) in abilityForms"
            @addItem="addItem"
            :abilityFlag ='abilityFlag'
        ></ability-content>
        <div class="add-btn" v-if="abilityForms.length == 0">
            <span>技能及特长</span>
            <el-button plain @click="addItem(0,5)">+添加技能及特长</el-button>
        </div>
        <div class="line"></div>
        <awardContent
            @updateResume="updateResumeAction"
            :id="id"
            v-if="awardForms.length > 0"
            :awardForms="awardForms"
            @deleteItem="deleteItem"
            :index="i"
            :key="`${i}6`"
            v-for="(v,i) in awardForms"
            @addItem="addItem"
            :awardFlag='awardFlag'
        ></awardContent>
        <div class="add-btn" v-if="awardForms.length == 0">
            <span>成果及获奖情况</span>
            <el-button plain @click="addItem(0,6)">+添加成果及获奖情况</el-button>
        </div>
        <div class="line"></div>
        <hobby-content :basicForm="basicForm" @updateResume="updateResumeAction" :id="id" :hobbyFlag='hobbyFlag'></hobby-content>
    </div>
</template>

<script>
import AbilityContent from './ability.vue';
import AwardContent from './award.vue';
import HobbyContent from './hobby.vue';
import { updateAbility } from '../../../../api/resumeEdit';
import { updateAward } from '../../../../api/resumeEdit';
import { updateMark } from '../../../../api/resumeEdit';
import { deleteSkill } from '../../../../api/resumeEdit';
import { deleteAward } from '../../../../api/resumeEdit';

export default {
    props: ['id', 'abilitysForms', 'awardsForms', 'basicForm'],
    components: {
        AbilityContent,
        AwardContent,
        HobbyContent
    },
    data() {
        return {
            abilityForms: [{}],
            awardForms: [{}],
            abilityFlag:true,
            awardFlag:true,
            hobbyFlag:true
        };
    },
    methods: {
        // 更新简历信息
        updateResumeAction(form, type, index) {
            console.log(type);
            switch (type) {
                case 1: // 技能特长
                    updateAbility(form).then(res => {
                        if (res.success) {
                            this.$notify({
                                type: 'success',
                                message: '保存成功'
                            });
                            if (form.id) {

                            } else {
                                this.abilityForms.splice(index,1,{ ...form, id: res.data })
                            }
                            this.abilityFlag=true;
                        } else {
                            if(this.abilityFlag===null){
                                this.abilityFlag=false;
                            }else{
                                this.abilityFlag=null;
                            }
                            this.$message.error(`${res.msg}`);
                        }
                    });
                    break;
                case 2: // 奖励
                    updateAward(form).then(res => {
                        if (res.success) {
                            this.$notify({
                                type: 'success',
                                message: '保存成功'
                            });
                            if (form.id) {

                            } else {
                                this.awardForms.splice(index,1,{ ...form, id: res.data })                                                                                                                                                                                                                 
                            }
                            this.awardFlag=true;
                        } else {
                            if(this.awardFlag===null){
                                this.awardFlag=false;
                            }else{
                                this.awardFlag=null;
                            }
                            this.$message.error(`${res.msg}`);
                        }
                    });
                    break;
                case 3: // 兴趣爱好
                    updateMark(form).then(res => {
                        if (res.success) {
                            this.$notify({
                                type: 'success',
                                message: '保存成功'
                            });
                            this.hobbyFlag=true;
                        } else {
                            if(this.hobbyFlag===null){
                                this.hobbyFlag=false;
                            }else{
                                this.hobbyFlag=null;
                            }
                            this.$message.error(`${res.msg}`);
                        }
                    });
                    break;
            }
        },
        addItem(index, type) {
            switch (type) {
                case 5: // 技能及特长
                    let obj5 = {};
                    this.abilityForms.splice(index + 1, 0, obj5);
                    break;
                case 6: // 成果及获奖情况
                    let obj6 = {};
                    this.awardForms.splice(index + 1, 0, obj6);
                    break;
            }
        },

        deleteItem(index, type, form) {
            console.log(form);
            switch (type) {
                case 5: // 技能及特长
                    if (form.id) {
                        this.$confirm('确定删除选中的技能及特长吗？', '技能及特长', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            deleteSkill(form.id).then(res => {
                                if (res.success) {
                                    this.$notify({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                    this.abilityForms.splice(index, 1);
                                } else {
                                    this.$message.error(`${res.msg}`);
                                }
                            });
                        });
                    } else {
                        this.abilityForms.splice(index, 1);
                    }
                    break;
                case 6: // 成果及获奖情况
                    if (form.id) {
                        this.$confirm('确定删除选中的成果及获奖情况吗？', '成果及获奖情况', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            deleteAward(form.id).then(res => {
                                if (res.success) {
                                    this.$notify({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                    this.awardForms.splice(index, 1);
                                } else {
                                    this.$message.error(`${res.msg}`);
                                }
                            });
                        });
                    } else {
                        this.awardForms.splice(index, 1);
                    }
                    break;
            }
        }
    },
    created() {
        this.abilityForms = this.abilitysForms;
        this.awardForms = this.awardsForms;
    }
};
</script>
<style lang="css" scoped>
.sub-info {
    background: #ffffff;
}
.sub-info-title {
    display: flex;
    justify-content: space-between;
    padding: 0 44px;
    background: #ffffff;
    height: 62px;
    align-items: center;
}
.sub-info-title span:after {
    width: 28px;
    height: 2px;
    background: #1893fc;
    content: '';
    display: block;
    margin-top: 3px;
}
.sub-info-title .el-button {
    padding: 0;
    width: 94px;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: #1893fc;
}
.line {
    width: 774px;
    margin-left: 44px;
    height: 1px;
    background: #e8e8e8;
    margin-top: 10px;
}
.add-btn {
    width: 100%;
    background: #ffffff;
    padding: 0 45px;
    box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.add-btn span {
    display: block;
    margin: 20px 0;
}
.add-btn .el-button {
    width: 100%;
    background: #ffffff;
    font-size: 14px;
    height: 40px;
    margin-bottom: 20px;
}
</style>
